<template>
  <div class="icon-container">
    <a-modal
      v-model:open="showIcon"
      width="60%"
      title="选择图标"
      :footer="null"
    >
      <div class="flex-row-ycenter mb-20">
        <div>网络图标：</div>
        <div>
          <Upload v-model:url="url_calc" :count="2"></Upload>
        </div>
      </div>
      <div class="flex-row" style="height: 60vh; overflow-y: auto">
        <div v-for="(item, index) in iconArr">
          <div
            class="icon-box pointer"
            @click="checkIcon(index)"
            v-if="
              index != 'createFromIconfontCN' &&
              index != 'default' &&
              index != 'getTwoToneColor' &&
              index != 'setTwoToneColor'
            "
          >
            <component :is="index" class="fs-22"></component>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, ref} from "vue";
import * as Icons from "@ant-design/icons-vue";
import Upload from "@/components/file/Upload.vue";

const showIcon = ref(false);
const iconArr = Icons;
const {proxy} = getCurrentInstance();
const url = ref<string>();

const props = defineProps({
  url: {
    type: String,
    default: ""
  }
});
const emits = defineEmits(["update:url"]);

const url_calc = computed({
  get() {
    if (!props.url) return "";
    if (props.url.includes("http")) return props.url;
    return "";
  },
  set(value) {
    emits("update:url", value);
  }
});

const checkIcon = (name) => {
  proxy.$emitter.emit("checkIcon", name);
  showIcon.value = false;
};

defineExpose({
  showIcon
});
</script>

<style lang="less" scoped>
.icon-box {
  padding: 10px;
}
</style>
